<template>
	<view class="container">
		<!-- 新建比赛 start -->
		<button class="golf-auth" type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo" @click="golfLogin"
		 hover-class="btn-hover">
			新建球局
		</button>
		<!-- 新建比赛 end -->
		<view class="golf-title">今日球局</view>
		<view class="golf-content">
			<!-- 高尔夫列表 start -->
			<view v-if="golfListNull.length!==0" v-for="(item,index) in golfListNull" :key="index" class="golf-list flex align-center">
				<!-- <view v-if="golfList.length===0" v-for="(item,index) in golfList" :key="index" class="golf-list flex align-center"> -->

				<view class="golf-info" style="background-color: #007 AFF;" @click="goGameDetail(item.golfTournamentId,item.currentTournamentGallery.golfTournamentGalleryId, item.currentTournamentGallery.isOrganizer, item.currentTournamentGallery.tournamentIdentity)">
					<view class="golf-line flex flex-between">
						<view class="golf-site">{{item.golfCourse.courseName}}</view>
						<view class="golf-sate golf-notStart" v-if="item.tournamentStatus===0">待开球</view>
						<view class="golf-sate golf-inProgress" v-else-if="item.tournamentStatus===1">待开始</view>
						<view class="golf-sate golf-end" v-else-if="item.tournamentStatus===2">进行中</view>
						<view class="golf-sate golf-end" v-else-if="item.tournamentStatus===3">已结束</view>
					</view>
					<view class="golf-line golf-time"><text>时间：</text>{{item.beginTime}} <text>围观：</text>{{item.galleryNumber}}</view>
					<!-- <view class="golf-line flex flex-between align-center">
						<view class="golf-speed"><text>果岭速度：</text>8.5</view>
						<view class="golf-weather">阴 24°C/32°C</view>
					</view> -->
				</view>
			</view>
			<!-- 高尔夫列表 end -->
			<!-- 高尔夫列表空 start -->
			<view v-if="golfListNull.length===0" class="golf-listNull">
				<img src="/static/image/null.png" alt="还没有球局呢!">
				<view class="golf-null">还没有球局呢!</view>
			</view>
			<!-- 高尔夫列表空 end -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				golfList: [{
					name: '四川成都国际场1111',
					state: 0,
					site: '成都麓山国际场地111',
					time: '周四 2020-07-23 13:42',
					num: '2人'
				}],
				current: 1,
				golfListNull: [],
				openId: '',
				nickName: null, //昵称
				avatar: null, //头像
				sex: null, //性别 0未填 1 男性 2女性
				isCanUse: uni.getStorageSync('isCanUse') || true //默认为true
			}
		},
		async onShow () {
			const {
				data: res
			} = await this.$api.match.tournamentPage({
				data: {current: this.current, size: 100, galleryId: uni.getStorageSync('golfGalleryId')},
			})
			if (res.code === 0) {
				this.golfListNull = res.data.records
			}
		},
		methods: {
			goGameDetail (golfTournamentId,golfTournamentGalleryId, isOrganizer, tournamentIdentity) {
				uni.setStorage({
					key:"golfTournamentGalleryId",
					data:golfTournamentGalleryId
				})
				let type = 0
				if (isOrganizer) {
					// 为组织者
					type = 1
				} else if (tournamentIdentity) {
					// 球员
					type = 2
				} else {
					// 观众
					if(golfTournamentGalleryId==0){
						this.$api.match.bindGaller({
							data:{
								tournamentIdentity:0,
								isOrganizer:0,
								golfTournamentId:golfTournamentId,
								golfGalleryId:uni.getStorageSync('golfGalleryId'),
								tee:0,
								kickoffOrder:0,
								
							}
						}).then(res=>{
							if(res.data.code==0){
								uni.setStorage({
									key:"golfTournamentGalleryId",
									data:res.data.data.golfTournamentGalleryId
								})
							}
							console.log(res)
						})
					}
					uni.navigateTo({ 
						url: '/pages/onlooker/onlooker?golfTournamentId=' + golfTournamentId 
					});
					return
				}
				

				console.log(golfTournamentGalleryId)
				uni.navigateTo({ //组织者跳入记分卡页面
					url: '/pages/score/score?golfTournamentId=' + golfTournamentId + '&type=' + type
				});
			},
			//获取用户信息
			getUserInfo() {
				new Promise(resolve => {
					uni.getUserInfo({ //获取用户信息
						success: res => {
							resolve({
								nickName: res.userInfo.nickName, //昵称
								avatar: res.userInfo.avatarUrl, //头像
								sex: res.userInfo.gender, //性别 0未填 1 男性 2女性
							});
						}
					})
				}).then(resUserInfo => {
					uni.setStorage({
						key: 'userInfo',
						data: resUserInfo,
					});
					uni.showLoading({
						title: '正在加载中'
					})
					this.$store.commit('userInfo', resUserInfo) //保存至Vuex内存
					return new Promise(async resolve => {
						const {
							data: res
						} = await this.$api.login.loginRequest({
							data: {
								avatar: resUserInfo.avatar,
								creatorOpenId: this.openId || uni.getStorageSync('openId'),
								nickname: resUserInfo.nickName,
								sex: resUserInfo.sex,
								openId: this.openId || uni.getStorageSync('openId'),
								updatorOpenId: this.openId || uni.getStorageSync('openId'),
							},
						})
						if (res.code === 0) {
							uni.setStorage({ //高尔夫球员ID存入本地
								key: 'golfGalleryId',
								data: res.data.golfGalleryId,
							});
							
							uni.hideLoading()
							uni.navigateTo({ //跳入球员设置页面
								url: '/pages/games/games'
							});
						}
					})
				})
			},

			//点击授权登录获取信息
			async golfLogin() {
				/*  #ifndef  H5  */ //H5页面不生效
				new Promise(resolve => {
					uni.getProvider({ //获取设备权限信息
						service: 'oauth',
						success: res => {
							resolve(res);
						}
					})
				}).then(res => {
					console.log('设备权限信息', res)
					
					uni.showLoading({
						title: '正在加载中'
					})
					return new Promise(resolve => {
						uni.login({ //登录加载获取code
							provider: `${res.provider[res.provider.length-1]}`,
							success: res => {
								resolve(res);
							}
						});
					}).then(loginCode => {
						console.log('登录code', res)
						return new Promise(resolve => {
							this.$api.login.openIdRequest({ //获取openid
								data: {
									code: loginCode.code
								},
								success: res => {
									resolve(res);
									console.log('获取openid', res.data.data.openid)
									this.openId = res.data.data.openid
									uni.setStorage({
										key: 'openId',
										data: res.data.data.openid,
									});
									this.$store.commit('openId', res.data.data.openid)
								}
							})
							//默认球场请求
							this.$store.dispatch('golfCourse')
						})
					})
				})
				/*  #endif  */
			}
		}
	}
</script>

<style scoped>
	.golf-auth {
		margin-bottom: 54rpx;
		border-radius: 60rpx;
	}

	.golf-list {
		margin-top: 40rpx;
	}

	.golf-info {
		width: 100%;
		padding-left: 22rpx;
	}

	.golf-site {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		line-height: 45rpx;
	}

	.golf-sate {
		font-size: 30rpx;
		font-weight: 600;
		line-height: 45rpx;
	}

	.golf-notStart {
		color: #ffd051;
	}

	.golf-inProgress {
		color: #0dd561;
	}

	.golf-end {
		color: #999;
	}

	.golf-time text:last-child {
		margin-left: 20rpx;
	}

	.golf-line {
		line-height: 2.2;
	}

	.golf-info text {
		font-size: 26rpx;
		color: #999;
	}

	.golf-speed {
		font-size: 24rpx;
		color: #999;
		line-height: 40rpx;
		height: 40rpx;
		border-radius: 24px;
		border: 2rpx solid #999;
		padding: 0 15rpx;
		text-align: center;
	}

	.golf-weather {
		font-size: 26rpx;
		color: #999;
	}

	.golf-listNull {
		color: #999;
		font-size: 24rpx;
		text-align: center;
	}

	.golf-listNull img {
		width: 150rpx;
		height: 150rpx;
		display: block;
		margin: 0 auto;
		text-align: center;
		margin-top: 200rpx;
		margin-bottom: 15rpx;
	}
</style>
